<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>全屏图片展示</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		
		body, html {
			height: 100%;
			overflow: hidden;
			background-color: #000;
		}
		
		.image-container {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: opacity 1.5s ease-in-out;
		}
		
		.image-container img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
		
		/* 极简加载指示器 */
		.loader {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 60px;
			height: 60px;
			border: 4px solid rgba(255, 255, 255, 0.1);
			border-radius: 50%;
			border-top: 4px solid rgba(255, 255, 255, 0.8);
			animation: spin 1s linear infinite;
			z-index: 100;
		}
		
		@keyframes spin {
			0% { transform: translate(-50%, -50%) rotate(0deg); }
			100% { transform: translate(-50%, -50%) rotate(360deg); }
		}
	</style>
</head>
<body>
	<!-- 图片容器 -->
	<div class="image-container">
		<img src="[IMG]" alt="全屏图片展示">
	</div>
	
	<!-- 加载指示器 -->
	<div class="loader"></div>
	
	<script>
		// 页面加载完成后移除加载指示器
		window.addEventListener('load', function() {
			setTimeout(function() {
				document.querySelector('.loader').style.display = 'none';
			}, 500);
		});
	</script>
</body>
</html>